<template>
	<div class="financeAccountDetails">
		<el-breadcrumb class="breadcrumb" separator="/">
			<el-breadcrumb-item :to="{ path: '/check' }">订单结算列表</el-breadcrumb-item>
			<el-breadcrumb-item>订单结算详情</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="footer-content">
			<el-button type="primary" @click="submit">保存</el-button>
		</div>
		<div class="info-content">
			<el-tabs class="info-tabs" v-model="activeName" @tab-click="$libs.scrollTop('.el-tabs__content')">
				<template v-for="vm in tapList">
					<el-tab-pane class="info-temp" :label="vm.name" :name="'tap'+vm.index">
						<div v-if="vm.temp=='attachment'" :is="vm.temp" :ref="vm.temp" @submit-attachmentHad="attachHave"></div>
						<div v-else :is="vm.temp" :ref="vm.temp"></div>
					</el-tab-pane>
				</template>
			</el-tabs>
		</div>
	</div>
</template>
<script>
export default {
	name: 'financeAccountDetails',
	components: {
		credit: require('../../components/order/credit'),
		customInfo: require('../../components/order/customInfo'),
		carBuyCommon: require('../../components/order/carBuyCommon'),
		assurePerson: require('../../components/order/assurePerson'),
		carAndCredit: require('../../components/order/carAndCredit'),
		attachment: require('../../components/order/attachment'),
		checkInfo: require('../../components/order/checkInfo'),
		historyLoan: require('../../components/order/historyLoan'),
		synthesize: require('../../components/order/synthesize'),
		finance: require('../../components/order/finance'),
		assetProtection: require('../../components/order/assetProtection'),
	},
	data() {
		return {
			orderNo: this.$route.query.orderNo,
			annexBatchNo: this.$route.query.annexBatchNo,
			customerId: this.$route.query.customerId,
			customerIdCard: this.$route.query.customerIdCard,
			activeName: 'tap7',
			tapNumEdit: 0,
			isAttachHaveRun: false,
			tapList: [
				{ name: '客户信息', index: 1, temp: 'customInfo', show: true },
				{ name: '共同购车人', index: 2, temp: 'carBuyCommon', show: true },
				{ name: '担保人', index: 3, temp: 'assurePerson', show: true },
				{ name: '车辆及贷款信息', index: 4, temp: 'carAndCredit', show: true },
				{ name: '审核信息', index: 10, temp: 'checkInfo', show: true },
				{ name: '综合处理', index: 8, temp: 'synthesize', show: true },
				{ name: '财务结算', index: 7, temp: 'finance', show: true },
				{ name: '附件', index: 5, temp: 'attachment', show: 'none' },
				{ name: '历史贷款记录', index: 6, temp: 'historyLoan', show: true },
			],
			submitInfo: {
				analy: '',
				suggess: '',
				isGps: '',
				isCheck: '',
				isCheckOther: false
			}
		}
	},
	watch: {
		tapNumEdit: function(_cur, _old) {
			console.log('tapNumEdit-' + _cur);
			if (_cur == 3) {
				console.log(this);
				for (var i = 0; i < this.tapList.length; i++) {
					if (this.tapList[i].show == false) {
						this.tapList.splice(i, 1);
						i--;
					}
				}
				this.tapNumEdit = 0;
				this.$nextTick(() => {
					this.getDataSecond();
				});
			}
		},
		deep: true
	},
	methods: {
		submit() {
			console.log(this.activeName);
			this.$store.commit('saveNumClear', 1);
			this.$refs.finance[0].financeEnter(this.orderNo, '', '', () => {
				this.$confirm('财务结算提交成功！', '提交成功', {
					confirmButtonText: '知道了',
					cancelButtonText: '关闭',
					type: 'success'
				}).then(() => {
					this.$router.push({ path: '/financeAccount' });
				}).catch(() => {})
			});
		},
		attachHave() {
			let ishaveAttach = false;
			for (var i = 0; i < this.tapList.length; i++) {
				if (this.tapList[i].index == 5) {
					ishaveAttach = true;
					this.tapList[i].show = true;
				}
			}
			if (!ishaveAttach) {
				this.tapList.push({ name: '附件', index: 5, temp: 'attachment', show: true });
			}
			this.isAttachHaveRun = true;
		},
		getDataSecond() {
			for (let i = 0; i < this.tapList.length; i++) {
				let el = this.tapList[i];
				switch (el.index) {
					case 6:
						this.$refs[el.temp][0].customerIdCard = this.customerIdCard;
						this.$refs[el.temp][0].getDate(this.orderNo);
						break;
					case 1:
						this.$refs[el.temp][0].getUserInfo(this.orderNo);
						break;
					case 2:
						this.$refs[el.temp][0].getInfo(this.orderNo);
						break;
					case 3:
						this.$refs[el.temp][0].getInfo(this.orderNo);
						break;
					case 4:
						this.$refs[el.temp][0].isGps = false;
						this.$refs[el.temp][0].getCarInfo(this.orderNo);
						this.$refs[el.temp][0].getLoanInfo(this.orderNo);
						break;
					case 5:
						this.$refs[el.temp][0].isEdit = true;
						this.$refs[el.temp][0].isShow.finance = true;
						this.$refs[el.temp][0].postDeal(this.orderNo, this.annexBatchNo);
						break;
					case 7:
						this.$refs[el.temp][0].isEdit = true;
						this.$refs[el.temp][0].getFinanceData(this.orderNo);
						break;
					case 8:
						this.$refs[el.temp][0].getData(this.orderNo);
						break;
					case 10:
						this.$refs[el.temp][0].getInfo(this.orderNo);
						break;
					default:
						break;
				}
			}
		},
		save() {

		}
	},
	mounted() {
		this.$nextTick(() => {
			this.$refs.attachment[0].isEdit = true;
			this.$refs.attachment[0].postDeal(this.orderNo, this.annexBatchNo);
			this.$refs.attachment[0].show = false;
			this.$refs.finance[0].isEdit = true;
			this.$refs.carAndCredit[0].isGps = false;
			this.tapNumEdit = 0;
			this.$refs.carBuyCommon[0].getInfo(this.orderNo, () => {
				for (let i = 0; i < this.tapList.length; i++) {
					let val = this.tapList[i];
					if (val.index == 2) {
						val.show = false;
						console.log('tapList1');
						this.tapNumEdit++;
					}
				}
			}, () => {
				console.log('tapList11');
				this.tapNumEdit++;
			});
			this.$refs.assurePerson[0].getInfo(this.orderNo, () => {
				for (let i = 0; i < this.tapList.length; i++) {
					let val = this.tapList[i];
					if (val.index == 3) {
						val.show = false;
						console.log('tapList2');
						this.tapNumEdit++;
					}
				}
			}, () => {
				console.log('tapList21');
				this.tapNumEdit++;
			});
			this.$refs.historyLoan[0].customerIdCard = this.customerIdCard;
			this.$refs.historyLoan[0].getDate(this.orderNo, () => {
				for (let i = 0; i < this.tapList.length; i++) {
					let val = this.tapList[i];
					if (val.index == 6) {
						val.show = false;
						console.log('tapList3');
						this.tapNumEdit++;
					}
				}
			}, () => {
				console.log('tapList31');
				this.tapNumEdit++;
			});

			if (this.$route.query.orderStatus == 51) {
				this.$refs.finance[0].disabledTwo = true;
			}
		});

	}
}

</script>
<style lang="scss" scoped>
@import '../../assets/css/site.scss';
.financeAccountDetails {
	padding: 10px 16px;
	position: relative;
	.info-content {
		background: #fff;
		padding: 20px;
		position: absolute;
		top: 50px;
		left: 16px;
		right: 16px;
		bottom: 0;
		.info-temp {
			background: #fff;
			padding: 0px 20px 100px 20px;
			.credit,
			.customInfo,
			.carBuyCommon,
			.assurePerson,
			.carAndCredit,
			.creditEnter,
			.attachment,
			.assetProtection,
			.checkInfo,
			.checkModify {
				padding-right: 200px;
			}
			.finance {
				padding-right: 100px;
			}
		}
	}
	.footer-content {
		background: #fff;
		position: fixed;
		bottom: 0;
		left: 200px;
		right: 0px;
		height: 36px;
		padding: 12px 100px 12px 50px;
		border-top: 1px solid #e0e6ed;
		z-index: 1;
		text-align: center;
		.toLeft {
			float: left;
		}
	}
	.submitContent {
		background: #fff;
		position: fixed;
		bottom: 60px;
		left: 200px;
		right: 0px;
		height: 300px;
		padding: 30px 100px 0px 8px;
		border-top: 1px solid #e0e6ed;
		.radioContent {
			text-align: left;
			margin: 5px 0px 0px 12px;
		}
		.arrow-down {
			color: #20a0ff;
			position: absolute;
			right: 25px;
			top: 15px;
			cursor: pointer;
		}
		.checkbox {
			margin-left: 10px;
		}
	}
	.submitContentTwo {
		height: 150px;
	}
}

</style>
